<template>
	<div class="tab_wrap">
		<div class="t_left ">
			<div class="tab_box">
				<ul ref="tab_ul">
					<li ref="tab_li" v-for="(x, indexX) in routerList" :style="{borderColor:nowPath == x.fullPath?sysTheme.theme_color:'' }" @click="clickFN(x)">
						<span :style="{color:nowPath == x.fullPath?sysTheme.theme_color:''}">{{x.meta.title}}</span>
						<i v-if="nowPath!=x.fullPath" class="el-icon-close" @click.stop="closeFN(x)"></i>
					</li>
				</ul>
			</div>
		</div>

		<div class="t_right">
			<el-dropdown @command="handleTags" trigger="click">
				<span class="el-dropdown-link" :style="{color:sysTheme.theme_color}">
					标签操作
				  	<i class="el-icon-arrow-down el-icon--right"></i>
				</span>
				<el-dropdown-menu size="small" slot="dropdown">
					<el-dropdown-item command="other">关闭其他</el-dropdown-item>
					<el-dropdown-item command="now">刷新当前</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
		</div>
	</div>
</template>

<script>
	import { mapMutations, mapState } from "vuex";
	import BScroll from 'better-scroll';

	export default {
		data() {
			return {
				routerList: [],
				nowPath: '', //当前路由路径
				sysTheme: this.$sysTheme(),
				BSscroll: null,

				avatar: require("@/assets/img/public/portraits.jpg"),

			};
		},
		watch: {
			//监听路由变化
			$route(newValue, oldValue) {
				this.setTags(newValue, oldValue);
			}
		},
		computed: {},
		created() {
			this.routerList.push(this.$route);
			this.nowPath = this.$route.fullPath;
		},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.$bus.$on('changeTheme', () => {
					this.sysTheme = JSON.parse(localStorage.getItem('sysTheme'));
				});
				this.initScroll();
			},
			initScroll() {
				let options = {
					startX: 0,
					startY: 0,
					scrollX: true,
					scrollY: false,
					click: true,
					momentum: true, //当快速滑动时是否开启滑动惯性
					bounce: true, //是否启用回弹动画效果
					direction: 'horizontal',
					probeType: 2, //滚动的时候会派发scroll事件，会截流。2滚动的时候实时派发scroll事件，不会截流。 3除了实时派发scroll事件，在swipe的情况下仍然能实时派发scroll事件
				}
				let lis = this.$refs.tab_li || [];
				let _width = 0;
				for(let item of lis) {
					_width = _width + (item.getBoundingClientRect().width + 20); //宽度加上margin的值
				}
				this.$refs.tab_ul.style.width = Math.ceil(_width) + "px"; //父元素的宽度 = 子元素的宽度相加的和
				this.BSscroll = new BScroll('.tab_box', options);
				this.BSscroll.on('scroll', (pos) => {
					//console.log(pos)
				});
			},
			setTags(newValue, oldValue) {
				this.nowPath = this.$route.fullPath;
				let n = 0;
				this.routerList.forEach((x, indexX) => {
					if(x.fullPath == newValue.fullPath) n++;
				});
				if(n == 0) this.routerList.push(newValue); // console.log(this.routerList)
			},
			clickFN(item, index) {
				this.routerList.forEach((x, indexX) => {
					if(item.fullPath == x.fullPath) {
						this.$router.push({
							path: x.path
						});
					}
				});

				let lis = this.$refs.tab_li || [];
				this.BSscroll.scrollToElement(lis[index], 200, true, true);
				this.BSscroll.refresh();
			},
			closeFN(item) {
				let n = 0;
				this.routerList.forEach((x, indexX) => {
					if(item.fullPath == x.fullPath) n = indexX;
				});
				if(this.routerList.length > 1) this.routerList.splice(n, 1);
			},
			handleTags(command) {
				if(command == 'other') {
					this.closeOther()
				} else {

				}

			},
			// 关闭其他标签
			closeOther() {
				let list = this.routerList.filter(item => item.path === this.$route.fullPath);
				this.routerList = list;
			},
		},
	};
</script>

<style lang="scss" scoped>
	@import '~assets/css/mixin';
	.tab_wrap {
		width: 100%;
		box-shadow: 0 1px 5px #ccc;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.t_left {
		flex: 1;
		overflow: hidden;
		.tab_box {
			height: 100%;
			ul {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: nowrap;
				li {
					margin: 4px 0 4px 8px;
					padding: 4px 8px;
					background: #fff;
					cursor: pointer;
					border-radius: 4px;
					box-sizing: border-box;
					border: 1px solid #ccc;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					span {
						white-space: nowrap;
						font-size: 14px;
						color: #333;
					}
					i {
						margin: 0 0 0 4px;
						font-size: 14px;
						color: #333;
						&:hover {
							color: red;
						}
					}
				}
			}
		}
	}
	
	.t_right {
		padding: 0 10px;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		.el-dropdown-link {
			cursor: pointer;
		}
	}
</style>